Web Accessibility & Universal Design for Learning

Web accessibility means that websites and web tools are designed to allow people with disabilities to perceive, understand, navigate, and interact with the Web. The Americans with Disabilities Act (ADA) and the Rehabilitation Act protect everyone’s right to have equal access to information and communication technologies, including the Web.

On This Page:

• Folio’s Accessibility Checker
• Alternative Text for Images
• Accessible Tables
• Accessible Headings
• Accessible Lists
• Color Contrast
• Accessible Links
• Captions & Audio Transcripts

Folio’s Accessibility Checker

The Folio Accessibility Checker is an essential tool integrated into the Folio HTML Editor. It is designed to help educators effortlessly create supportive and accessible web content.

Using the Folio’s Accessibility Checker

To use Folio’s Accessibility Checker, access the HTML Editor and navigate to the Content Area.

1. Go to the course where you want to edit a content page.
2. Select the module or topic where you want to add or Edit HTML content to reveal the toolbar.
3. Click the Accessibility Checker button. A report will reveal any errors, allowing you to fix the accessibility issue.
4. Click on Repair
5. Repeat if necessary
6. Once the checker is finished, click Save and Close.

The Accessibility Checker identifies common accessibility issues and offers suggestions to help correct the issues.

• Image Alt Text: This feature automatically prompts you to add alternative text for images, ensuring that visually impaired users can understand the content.
• Color Contrast: This check measures the contrast ratio of text and background colors to meet WCAG 2.1 and 2.2 standards, ensuring your content is readable for everyone.
• Headings and Lists: Ensures proper use of headings and lists for better navigation and comprehension by screen readers (H1, H2, H3, H4…)
• Link Descriptions: Encourages descriptive hyperlink text to provide clear context for users with disabilities.
• Table Markup: Reviews table structures to ensure they are accessible and properly formatted.

Using the Brightspace Accessibility Checker, you can confidently create content that meets common accessibility standards while providing a seamless experience for all learners.

Alternative Text for Images

Alternative text, also known as alt text, is descriptive text that conveys the meaning of an image in digital content. It is designed to make visual content accessible to people with vision disabilities.

When a student uses assistive technology such as a screen reader, the screen reader will read the onscreen text aloud. When the screen reader reaches an image, it will read the alt text for that image so the user can know what the image is meant to convey. from Authoring Meaningful Alternative Text | Section 508.gov.

Examples of how to write alt text can be found at: Authoring Meaningful Alternative Text | Section 508.gov.

Alt Text in Folio

1. Open the Folio Editor
2. Insert an image into the editor. You will be prompted to enter the alt text or check the box for decorative.
3. Type the alternative text in the text box provided, or check the box for this image is decorative.
4. Click OK.
5. Click Save and Close.

Accessible Tables

Tables are typically filled with information grouped by columns or rows, or sometimes both. For this table of baseball statistics, the data is organized by column and row. The top row contains headers for each column. The first column identifies each player. The second column identifies the home runs for each player. The third column identifies the batting averages for each player.

To make this table accessible to support students using screen readers, it is important to create and identify the “headers” for each column.

Accessible Tables in Folio

In Folio, the best way to correct your table headers is to run Folio’s Accessibility Checker. To use Folio’s Accessibility Checker, open the Editor and navigate to the Content Area.

1. Click Edit/Edit HTML on the Folio item with the table.
2. Click the Accessibility Checker button. A report will reveal any errors, allowing you to fix the accessibility issue.
3. The Folio Accessibility checker will ask for table captions. Type a brief description of the table in the space available and click the Repair button.
4. Next, the Accessibility Checker will ask for a header row and column. Click Repair.
5. Click Save.
6. Click Save and Close.

Accessible Headings

Page titles and section headings are often styled with larger, bold fonts to create visual hierarchy. However, this visual formatting alone doesn’t help screen readers, which rely on properly coded heading levels to navigate a page.

Using the text editor’s built-in heading styles (like Heading 1, Heading 2, etc.) is one of the most effective ways to create accessible content and ensure screen reader users can quickly understand and navigate the content.

Use Headings to Outline Content

Screen readers help visually impaired users understand how content is organized by announcing headings and their levels. This allows users to quickly grasp the main ideas of a page and navigate directly to the sections that interest them most. To support this, pages should follow a logical, hierarchical structure—much like an outline. Start with a single top-level heading (<h1>) to identify the main topic, followed by second-level headings (<h2>) for key sections. If needed, break those sections down further using third-level headings (<h3>) to organize subtopics clearly. This structure ensures a meaningful reading experience for all users.

Typical Outline Structure

• Heading 1 (Document Title)
• Heading 2 (Section)
• Heading 3 (Sub-Section)
• Heading 3 (Sub-Section)
• Heading 1 (Document Title)
• Heading 2 (Section)
• Heading 3 (Sub-Section)
• Heading 3 (Sub-Section)

To use Folio’s Accessibility Checker, access the HTML Editor and navigate to the Content Area.

1. Click Edit/Edit HTML on the Format item on the toolbar.
2. Select the correct header.

Accessible Lists

Lists are essential tools for organizing content in a structured, easy-to-read format. When created properly, they enhance comprehension and navigation for all users—including those using assistive technologies like screen readers. This page outlines best practices for making your ordered and unordered lists accessible and compliant with WCAG 2.2 standards.

Creating lists can be visually misleading. For instance, if you use asterisks (*) from your keyboard to create the appearance of a list, it might look correct visually—but it won’t be accessible.

To ensure accessibility, use the proper list tools or formatting options provided in the editor or toolbar.

Accessible Lists in Folio

To use Folio’s Accessibility Checker, access the HTML Editor and navigate to the Content Area.

1. Click Edit/Edit HTML on the Folio listed item in the toolbar.
2. Click the down arrow on the list button and can select either a bulleted list or a numbered list.
3. Enter the information for the list.
4. Click Save and Close.

While the Folio Accessibility Checker will indicate accessibility issues with a list, it cannot automatically repair the list. The list will need to be manually formatted using the list button.

Color Contrast

Folio has a built-in color contrast checker that helps instructors and content creators meet Web Content Accessibility Guidelines (WCAG) standards. This tool automatically evaluates text and background color combinations to ensure sufficient contrast, making course content easier to read for all users, including those with visual impairments. By identifying and flagging low-contrast areas, the checker helps create accessible learning experiences.

How to Access the Color Contrast Checker in Folio

1. Open the HTML Editor in Folio
2. Click the Accessibility Checker icon in the Editor Toolbar. The checker will automatically scan your content and highlight any accessibility issues, including insufficient color contrast.
3. If a color contrast issue is found, it will recommend changes.
4. To fix this error, Highlight the text in question
5. Select the edit color icon
6. Select a color. If the contrast is good.

This tool helps ensure your text is legible for all users by checking that the contrast between foreground (text) and background colors is strong enough for visibility.

Color Checker Tool

• Color checker tool from WebAIM.

Accessible Links

Creating accessible links in your Folio course content is an essential part of inclusive design. Clear, meaningful links help all students—especially those using screen readers or keyboard navigation—understand where a link will take them and how it relates to the content.

Why Accessible Links Matter

Students who use screen readers often navigate by jumping from link to link. If your link text says “click here” or “read more,” it doesn’t provide enough context. Instead, descriptive links help users make informed choices and reduce cognitive load.

Best Practices for Accessible Links

• Use Descriptive Link Text
  • Link text should clearly describe the destination or action.
  • Not accessible: Click here to view the course syllabus.
  • Accessible: View the Course Syllabus.
• Keep Link Text Short but Meaningful
  • Avoid long URLs or entire sentences as links. Aim for short, relevant text.
  • Good Example: Access the Module 3 Reading: Universal Design for Learning (PDF).
• Don’t Use URLs as Link Text
  • Screen readers read every letter of a URL, which can be confusing and time-consuming.
  • Not Accessible: https://www.example.com/universal-design-full-guide.pdf
  • Accessible: Read the Universal Design Full Guide (PDF).
• Indicate File Types (When Applicable)
  • If the link opens a file, let students know what to expect.
  • Example: Download the Final Project Rubric (Word Document)
• Avoid Opening Links in New Windows
  • Opening new tabs or windows can disorient users—especially screen reader users or students with cognitive disabilities. If a new window is necessary, give a clear heads-up.
  • Example: Visit the Library Research Database (opens in a new window)

How to Add Accessible Links in Folio

1. Click Edit/Edit HTML on the Folio listed item in the toolbar
2. Highlight the descriptive text you want to turn into a link.
3. Click the Insert Quicklink icon (chain link symbol)
4. Choose the type of link (e.g., URL, Content, File).
5. Paste or select the destination.
6. Save and Close

Captions & Audio Transcripts for Videos

Captions

Accommodations for videos and audio make lectures and course content accessible to all students. The most accessible videos typically feature captions, audio descriptions, and keyboard navigation capabilities. Those videos may vary in appearance based on the students’ specific needs. The following resources provide information on using campus-approved software to record video lectures.

Captioning YuJa Videos

If the videos are in YuJa and you own or can edit them, YuJa automatically machine-generates captions. These captions do need to be reviewed and correct where needed. To apply captions to YuJa videos:

1. Upload your video to YuJa.
2. Wait a for YuJa to apply auto-captions.
3. Review and correct the captions. Apply capitalization and punctuation where needed.

Detailed instructions for using your Georgia Southern YuJa account can be found at YuJa Resources for Instructors.

Detailed instructions for editing captions in YuJa can be found at Editing Captions in the Video Editor.

Captioning YouTube Videos

Captions on your videos in your Georgia Southern YouTube account can be edited.

1. Upload your video to Your Georgia Southern YouTube account.
2. Wait for YouTube to apply auto-captions
3. Review and correct the captions. Apply capitalization and punctuation where needed.

Detailed information can be found at Editing or removing captions—YouTube Help.

Captions on YouTube or Vimeo videos that you do not own cannot be directly edited. However, you can add captions to those videos using Amara.org. The free subscription should suit your needs.

Captioning Google Drive Videos

If your videos are stored in your Google Drive, and you want to keep using the videos located in Google Drive, rather than using the links to videos in your YuJa or to your Georgia Southern YouTube account, then the following steps outline how to add captions to videos in your Google Drive.

• Upload the videos to YuJa or YouTube (can be set to private).
• Apply and edit the captions.
• Download the captions file from YuJa or YouTube.
• Upload caption file to Google Drive video. Detailed information can be found in the Google Drive Help Document: Add caption tracks to your video files.

Captioning Folio Videos

We recommend uploading your videos to YuJa or YouTube and then add YuJa or YouTube videos to Folio, rather than uploading videos directly to Folio. However, you can still add captions to videos in Folio that have been added directly in Folio.

1. Upload your video to YuJa or YouTube to generate captions.
2. Edit and correct the captions where needed. Make sure to correct spelling, capitalization, and punctuation.
3. Download the captions as a file in either the .SRT or the .VTT file format.
4. Add the caption file to your Folio video using the instructions at Add subtitles to videos – Brightspace.

Audio Transcripts

Accessible transcripts include punctuation and capitalization, which are normally not part of auto-generated transcripts. Without punctuation and capitalization, transcripts have no readability and context. “When creating transcripts for videos and audio-only and video-only content, follow these guidelines from Create Accessible Captions and Transcripts:

• Provide the transcript in an accessible format, like a Section 508-conformant web page, a plain text file, or a conformant Microsoft Word document.
• For audio-only content, use the same guidelines as captions for determining which sounds to transcribe and what audio information must be included.
• For video content, use the same guidelines as audio descriptions for determining which imagery to describe and what visual information must be included.
• Ensure that users can access the transcript in the same place as the original content.